<%--
  Created by IntelliJ IDEA.
  User: 92110
  Date: 12/6/2021
  Time: 9:47 AM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>文章类型管理</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>

    <style>
        td {
            vertical-align: middle !important;
        }

        .row {
            margin-bottom: 30px;
        }

        th {
            text-align: center;
        }

        #add {
            margin: 0 50px;
        }
    </style>

</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div>
            <ol class="breadcrumb">
                <li><a href="${pageContext.request.contextPath}/user/toMain" class="btn btn-primary btn-sm"
                       role="button"><span class="glyphicon glyphicon-home pull-right" aria-hidden="true"></span>&nbsp;&nbsp;
                    主&nbsp;&nbsp; 页</a></li>
                <li class="active">系统功能管理</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-sm-offset-6">
            <div class="input-group input-group-sm">
                <span class="input-group-addon">是否可用</span>
                <div class="form-control" id="searchState">
                    <a id="All" href="${pageContext.request.contextPath}/function/list/1">
                        全部
                    </a>&nbsp;|&nbsp;
                    <a id="OneAll" href="${pageContext.request.contextPath}/function/queryListOne/1">
                        可用
                    </a>&nbsp;|&nbsp;
                    <a id="ZeroAll" href="${pageContext.request.contextPath}/function/queryListZero/1">
                        不可用
                    </a>
                </div>

                <script>
                    $("#All").click(function () {
                        $(this).css("color", "red")
                    })
                    $("#OneAll").click(function () {
                        $(this).css("color", "red")
                    })
                    $("#ZeroAll").click(function () {
                        $(this).css("color", "red")
                    })
                </script>
                <span class="input-group-addon">按名称搜索</span>
                <input type="text" class="form-control" placeholder="输入包含的类型名称" id="searchWord"/>
                <span class="input-group-btn">
                        <button class="btn btn-success" type="button" id="search">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </button>
                    </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-2">
            <div class="btn-toolbar">
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-success" id="all_select" onclick="checkedAll()">全选</button>
                    <button class="btn btn-info" id="inverse-select" onclick="reverseAll()">反选</button>
                    <button class="btn btn-success" id="notall-select" onclick="notCheckedAll()">全不选</button>
                </div>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-primary" id="add"
                            onclick="window.location.href = '${pageContext.request.contextPath}/function/addUI'">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true">

                        </span>添 加
                    </button>
                </div>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-danger" id="delSelected">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 批量删除
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <table class="table table-sm table-bordered table-hover text-center">
                <tr>
                    <th></th>
                    <th>功能编号</th>
                    <th>功能标题</th>
                    <th>功能描述</th>
                    <th>功能状态</th>
                    <th>操作</th>
                </tr>

                <c:forEach items="${pageInfo.list}" var="function">


                    <tr id="pageList">
                        <td><input name="ids" type="checkbox" class="typeId" value="${function.funId}"/></td>
                        <td>${function.funId}</td>
                        <td>${function.funName}</td>
                        <td>${function.funDesc}</td>
                        <td class="state">
                            <c:if test="${function.funState eq 0}">
                                不可用
                            </c:if>
                            <c:if test="${function.funState eq 1}">
                                可用
                            </c:if>
                        </td>

                        <td>
                            <button id="delete" class="btn btn-danger btn-sm"
                                    <c:if test="${function.funState eq 0}">disabled="disabled"</c:if>
                                    onclick="alert('请问是否删除?'),window.location.href = '${pageContext.request.contextPath}/function/delete?id=${function.funId}' ">
                                <span class="glyphicon glyphicon-trash delete" aria-hidden="true"></span> 删除
                            </button>
                            &nbsp;&nbsp;
                            <button id="update" class="btn btn-info btn-sm"
                                    <c:if test="${function.funState eq 0}">disabled="disabled"</c:if>
                                    onclick="window.location.href = '${pageContext.request.contextPath}/function/updateUI?id=${function.funId}' ">
                                <span class="glyphicon glyphicon-pencil update" aria-hidden="true"></span> 修改
                            </button>

                            <button id="page" class="btn btn-info btn-sm"
                                    onclick="window.location.href='${pageContext.request.contextPath}/function/skip?id=${function.funId}'"
                                <%--                                    <c:if test="${article.state eq 0}">disabled="disabled"</c:if>>--%>
                            <span class="glyphicon glyphicon-list-alt detail" aria-hidden="true"></span> 详情
                            </button>
                        </td>
                    </tr>
                </c:forEach>
                <script>
                    function checkedAll() {
                        let cbArr = $(".typeId");
                        for (let x = 0; x < cbArr.length; x++) {
                            cbArr[x].checked = true;
                        }
                    }

                    function reverseAll() {
                        let cbArr = $(".typeId");
                        for (let x = 0; x < cbArr.length; x++) {
                            cbArr[x].checked = !cbArr[x].checked;
                        }
                    }

                    function notCheckedAll() {
                        let cbArr = $(".typeId");
                        for (let x = 0; x < cbArr.length; x++) {
                            cbArr[x].checked = false;
                        }
                    }
                </script>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-sm-offset-2">
            <div class="input-group input-group-sm" style="margin-top: 20px">
                <span class="input-group-addon">共计:${pageInfo.pages}页${pageInfo.total}条记录，每页</span>
                <select class="form-control">
                    <option value="5" selected>5</option>
                    <%--                    <option value="10">10</option>--%>
                    <%--                    <option value="20">20</option>--%>
                </select>
                <span class="input-group-addon">条，跳转到</span>
                <input type="text" class="form-control" placeholder="请输入页码数" id="pages">
                <span class="input-group-btn">
					<button class="btn btn-success btn-sm" type="button" id="jump">跳转
						<span class="glyphicon glyphicon-send" aria-hidden="true"></span></button>
				</span>
            </div>
        </div>
        <div class="col-sm-4 col-sm-offset-1" style="margin-left:13%">
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-sm">
                    <li><a href="${pageInfo.firstPage}">首页</a></li>
                    <li>
                        <c:if test="${pageInfo.isFirstPage==false}">
                            <a href="${pageInfo.prePage}" aria-label="Previous">
                                <span aria-hidden="true">上一页</span>
                            </a>
                        </c:if>
                    </li>
                    <li>
                        <c:if test="${pageInfo.isLastPage==false}">
                            <a href="${pageInfo.nextPage}" aria-label="Next">
                                <span aria-hidden="true">下一页</span>
                            </a>
                        </c:if>

                    </li>
                    <li><a href="${pageInfo.lastPage}">尾页</a></li>
                    <li><a>当前页:${pageInfo.pageNum}</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>
